import React, { useContext, useState } from "react"
import { MenuItemProps } from "./menuItem"
import { MenuContext } from "./menu"
import classNames from "classnames"
import Icon from "../Icon/icon"
import Transition from "../Transition/transition"

export interface SubMenuProps {
    index?: string,
    title:string,
    className?:string,
    children:React.ReactNode
}

const SubMenu = ({
    title,
    children,
    index,
    className
}:SubMenuProps) => {
    const context = useContext(MenuContext)
    const openSubMenus = context.defaultOpenSubMenus as Array<string>
    const isOpened = (index && context.mode === 'vertical') ? openSubMenus.includes(index) : false
    const [menuOpen,setOpen]  = useState(isOpened)
    const classes = classNames('menu-item submenu-item',className,{
        'is-active': context.index === index,
        'is-opened':menuOpen,
        'is-vertical':context.mode === 'vertical'
    })
    const handlerClick = (e:React.MouseEvent) => {
        e.preventDefault()
        setOpen(!menuOpen)
    }
    let timer:any
    const handleMouse = (e:React.MouseEvent,toggle:boolean) => {
        clearTimeout(timer)
        e.preventDefault()
        timer = setTimeout(() => {
            setOpen(toggle)
        },300)
    }

    const clickEvents = context.mode === 'vertical' ? {
        onClick:handlerClick 
    } : {}
    const hoverEvents = context.mode !== 'vertical' ? {
        onMouseEnter: (e:React.MouseEvent) => handleMouse(e,true),
        onMouseLeave: (e:React.MouseEvent) => handleMouse(e,false)
    } : {}
    
    const renderChildren = () => {
        const subMenuClasses = classNames('leo-submenu',{
            'menu-opened':menuOpen
        })
        const childrenComponent =  React.Children.map(children,(child,i) => {
            const childElement = child as React.FunctionComponentElement<MenuItemProps>
            if (childElement.type.displayName === 'MenuItem') {
                return React.cloneElement(childElement, {
                    index: `${index}-${i}`
                })
            } else {
                console.error("Warning: SubMenu has a child which is not a MenuItem component")
            }
        })
        return (
            // 为其添加动画
            <Transition
                in={menuOpen}
                timeout={300}
                animation="zoom-in-top"
            >
                <ul className={subMenuClasses}>
                    {childrenComponent}
                </ul>
            </Transition>
        )
    }

    return (
        <li key={index} className={classes} {...hoverEvents }>
            <div className="submenu-title" { ...clickEvents }>
                {title}
                <Icon icon='angle-down' className="arrow-icon"></Icon>
            </div>
            {renderChildren()}
        </li>
    )
}

SubMenu.displayName = 'SubMenu'

export default SubMenu
